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ABSTRACT 


The study of human computer interaction is becoming an important consideration, 
while designing user interfaces for public infomnation systems. It is also important to 
study user behavior and their interaction with the system, so that overall interface 
should rcllect an intuitive design approach. Creating user scenarios and usability 
testing, these systems can be refined to achieve the desired goal. 

Niiwadays touch screen based public information systems are being used in many 
places for novice users. Since there is a single mode of input (i.e. finger touch), it is 
very easy to use them without having prior knowledge of computers. An experiment 
has been conducted to study user’s interaction with a touch screen based gaming 
application, 'fhe empirical data analysis suggests the ways to improve human 
performance characteristics over touch screen-based systems. 

Another part of this thesis is to design an Information Kiosk Interface for 
providing easy navigation of academic area of IIT Kanpur. A Kiosk is a stand-alone 
PC' mounted on a structure that function as a source of information. It includes human 
interaction with the system through the means of touch screen. The results from the 
previous experiment have been implemented in this system to make it efficient and 
easy to use. 'fhe Design of this system involves the study of Human Computer 
Imcrudion and User Centered Design Processes. The process includes, study of 
existing systems, user interviews, conceptual ideas, developing prototypes, feedback 
collection, modifications and troubleshooting. 
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Chapter 1 
Introduction 


I'ho term "llscr [nlcii'acc" refers to the methods and devices that are used to 
accommodate interaction between machines and the human beings who use them (users). 
User interfaces can take on many forms, but always accomplish two fundamental tasks: 
communicating information from the machine to the user, and communicating 
information from the user to the machine. The devices that are used to implement user 
interfaces on modern computers are video screens, keyboards, and pointing devices such 
as mice, track balls, touch pads and touch screens. 


Majority of people in India are not exposed to computer technology and due to this, 
most of the public information systems have been designed according to the users’ 
lumiliarity with the systems. Interactive Voice response Systems (IVRS) are successful in 
most ol‘ the application because Most of the people are familiar with the interface of 
conventional telephony. But main challenge comes in designing information systems 
where user can participate in interacting with the computer interfaces and can retrieve the 
tlesired intoi-mation. fouch .screen technology provides an easy and efficient approach for 
(.lesigning u.ser interfaces for public information systems. 


Interaction n\er the touch screen is the most "Direcf' fonn of interaction in liC'f Tlie 
/cro tiis|ilacemcnt between input and output, control and feedback makes touch screen 
ver_\ intuitive to use. particularly for novice users. Besides its directness, touch screen 
al:M> iiavc ■.'•".•ciai limitations, first, the user's finger, hand or arm can ob.scure me .•^cl•een. 
Second, human linger has a veiy low resolution. All these limitation must be considered 
while designing interlaces with touch screen as a basic mode ot interaction. 



I he study oi user s behaviour is an important task before designing any interface. In 
ease of touch screen interaction, the basic mode of input is finger touch over the screen. 
I'ingei has a very low resolution, due to which it is difficult to point at small targets. This 
problem can be solved either by increasing the target size or by keeping the target size as 
it is and using some high precision methods to point at that. Few researches have been 
done in this field, but all those methods are time consuming hence less preferred in most 
of the applications. 


I his thesis work explores the study of Human Computer Interaction in touch screen 
based information systems, design issues of such systems and implementations. An 
experiment has been conducted for studying the user habits and behaviours while 
interacting over touch screen. 'I'he empirical data analysis suggests the ways to improve 
human performance characteristics over touch screen-based systems. 

I'he main contributions of this thesis are as follows: 

■ A new set of rules for keeping the parameters of interaction elements over the 
touch screens such as buttons size, colour, texture etc. 

■ Implementation of these results in an Information Kiosk for academic area of IIT 
Kanpur. 

The organization of the thesis is as follows: 

( haptcr 1: 

This chapter describes the various areas of design such as Interaction Design. Fitts' 
law. Infographics, (.'artogra[-)hy and Iconic Communication including the study of Human 
factors such as mental models in HCI and Mind Maps. In continuation, different 
techniques to visualize and represent information have been described here. In the end of 
lliis chapter an introduction of usability engineering and user centered design processes 
lias been described. 

Chapter 2: 

'I'his chapter describes the history of touch screen technology, types of touch screens, 
and its implementations in interaction design. This chapter also deals with the study of 



^ Intel lace Design issues tor touch screen based Public Information Kiosks. A brief 
analysis ol High Ih'ecision 1 ouch Screen Interaction is described in the last section of this 
chapter. 

Chapter 3: 

I his chapter covers an experiment conducted to study user’s behaviour towards a 
touch screen based navigation gaming application. The experimentation goals, procedure, 
and final analysis of data have been described here. The visualization of the discrete data 
collected Irom the users has been included for better understanding of the scenario. 

C’haptcr 4: 

This chapter consists of the complete design process involved in developing the 
interface for touch screen based information kiosk for IIT Kanpur. It involves, problem 
delinilion, neeti statement, specification and constrains, concept development, design 
process, prototyping and usability issues 

C!haplcr 4: 

I'his concluding chapter summarizes the contributions of the thesis and point out the 
directions of possible further work in this field. 



1 . 1 Preliminaries 


1 his chapter covers a brief study of various areas of design, which contributes to the 
science o t human-machine interaction. The main focus is on the interaction of human and 
computer through the medium of visual communication techniques. This chapter will 
discuss briefly about various aspects of Interaction Design, Iconic Communication, 
Human Cognitive Processes, Mantel Models, Information Visualization, Cartography, 
Navigational wSystems and Usability Engineering. All these aspects collectively contribute 
to tlie complete design process. 


1.2 1 nteraction Des ign 


"lie is not paying allenlion to me. I don’t like his responses whenever I talk to him. 
and his iiv/i’ of talking is imhearahle. He is unable to communicate with me. 1 am not 
going to talk to him any more 

These kinds of problems we face mostly with people around us. Sometimes we don’t 
like their way to communicate and sometime we don’t like their behavior. In this kind of 
human-human communication, people normally try to avoid such awkward situations. 
But wlicn it comes to human- machine interaction, there are many limitations which have 
to be considered and users has to compromise on the interaction with the machines. With 
the evolution of technology and information systems, it became very essential to create an 
interactive environment for the users, so that efficiency of machines as well as users can 
be increased. With the evolution of Graphical User Interface (GUI) and multimedia, the 
interface elements became efficient enough to communicate with the user. Nowadays, 
almost every successlul multimedia system has a strong communication and interactive 
feattire in it. I, ike other design aspects, interaction design too has some rules and 
principles, which should be known a priori for a usable design. 



1.2.1 Basic Principles of Interaction Design 

I'Jl'cctive interlaces always follow basic principles to develop interaction between 
Lisei and the application. With the evolution of technologies, so much of works has been 
done to improve the human- machine interaction, but most of these principles always 
remain constant. 

Ltlective interfaces always assume that a user is unaware of inner working of the 
system, hence provides a flexible environment. User can undo his unwanted activities at 
anytime as system gives the option to log user’s activities. These interfaces give user, a 
sense ol control over the system. User can easily and quickly see all the command and 
controls and can achieve the desired goal efficiently. In continuation, system should be 
eUleient enough to pciTorm maximum task, with the minimum input from the user. 

Some of the basic principles of interaction design are as follows: 

(i) Anticipation 

Users expectations should be satisfied by the application. To evoke necessary action 
user should not search for the information and system should bring all the tools and 
information needed for every step of process. 

(ii) Autonomy 

User should be given a task environment to work upon, which provides him a 
comfortable level of autonomy over the system. Users feel most comfortable in an 
environment that is neither confining nor infinite, an environment explorable, but not 
ha/tirdoLis. 

Status mechanism is a must when system takes longer time to perform a series of 
tasks and help workers to respond appropriately to changing conditions. 


(ill) Color Blindness 

flight percent of the men suffer a cellular alteration of the retina that prevents them to 
perceive the colors properly. A color-blind person does not distinguish the difference 
between .some colors. The interface should be designed considering these conditions as 
normal person can have a small degree of color blindness. 
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(iv) User Efficiency 

All Lisci -centered designs reflect the consideration of user efficiency, not the 
machines, hoi example, consider four icons of 4x4 pixel named Icon], Icon2, IconS and 
Ic()n4 on a 1024x764 screen resolution. Keep Iconl and Icon! in the top-left and top-right 
corner ol the screen respectively. Keep Icon3 and Icon4 in the middle of screen and the 
gap between two icons is 800 pixels. Now ask user to start clicking Iconl and Icon2, one 
after another for few seconds. Repeat the same process with Iconl and Icon2. Which of 
the two cases has faster clicking with minimum error? 

(ienerally speaking, with IconS and Icon! should be faster then Case 2 with Iconl 
and Icon. 2 since the distance between the icons is more in Case 2, but if we consider 
users efficiency, this is not the correct answer. 


C'ase 1 


C'ase 


0 


_J 




l ^onl 


1016 Pixels 


Ieoh 


i 


<- 

□ 

Icon? 


800 Pixels ► 

□ 

Icon4 


f igure 1.2.1: Screen Layout with 1024 x 768 resolution 


All the four corners of screen provide the most accurate access to the mouse pointer 
and users can ticcess these four points very easily even if they close their eyes. Whereas 
in (’ase 2, even if the distance between the two icons is less, the user has spend a traction 
of a second to stop his mouse exactly over the icon. This process then slows down the 
access speed of the icons. 
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I () iiiipiove the elllciency ot the whole working system, it is very much necessary to 
impiovc the elticiency ol user along with the rest ot the elements of the system. 

(v) Consistency ("Principle of least astonishment") 

I his implies that an interface should present a harmony or agreement between all 
areas and within those areas to present a solid or consistent whole. In a good design, 
consistency must relate to behaviors ot object directly. Objects or visual element should 
be visually consistent, which act in a similar way. Inconsistency must be maintained 
between tlie objects ofditTcrent behavior. 


(vi) Defaults 

Delaults always help users to navigate faster as most of the options can be skipped 
because ol their default selection. Defaults should be decided based on users expectations 
and they should be responsive. 

(vii) F.xplonible Interfaces 

Interface should provide user, a well-defined path to achieve a desired goal. User 
should be able U) get job done in the quickest way possible. Stable visual elements gives 
user a sense of' home also helps in fast navigation. If users perform something unusual or 
undesired, then they should be able to go back to the previous state. By making actions 
reversible, users can explore as well as navigate through unknown option without having 
a I'ear of getting trapped. 

(ix) lluiinin Interface Objects 

In an interactive environment, interface objects play a vital role in interacting with the 
user. These objects have life and they are the key elements throughout the interface, 
which actually communicates with the user. Most of them have standard way of 
interaction and resulting behavior. These objects should be self-consistent, stable and 
understandable. 

(x) Latency Keduction 

Users have the tendency to loose interest if a system gives slow responses on users 
actions. To hold the attention of user, it is very much necessary to reduce the latency. All 
the buttons or links should be acknowledged by a feedback within 50 milliseconds. If a 
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piocess is taking more then 2 seconds to respond, it is better to show a status icon. 
Ihogiess indicators can he used to acknowledge longer tasks. Multiple clicks should be 
tiapped il user is working on a low bandwidth system, so as to prevent the system to 
become slower. 

(xi) Two Second Rule: 

I his Principle states that a user should not need to wait more than two seconds for 
certain types ol system responses, such as launch of a application or application 
switching. 

(xii) Learnability 

for lirst timers some learning environment must be given for every application, 
irrespective of how easy is the product. Users generally interact with the product and 
achieve instant mastery. 

(xiii) Metaphors 

Metaphors are the very important elements, which actually deals with the human 
perception and thought process. To grasp the finest details of the conceptual model, 
metaphors are very helpful as they evoke the people's perception such as sight, sound, 
touch etc. 

l*'or example, Windows 98 has an object called Recycle Bin. Its propose in real life is 
to collect unused item and recycle then whenever necessary. In windows 98 it’s 
functioning is similar as it collects all the deleted files and data and that data can be revert 
buck whenever needed. 

(xiv) Protect User’s Work 

The greate.st fear, which users are having, is loss of data as a result of their error. User 
sliould be ensured that the data couldn’t be lost easily. This can be done using automatic 
data backup techniques and providing options to go back to the previous state. 

(xv) Readability 

Clear visibility of visual elements is a must in an interface. Better visibility of text, 
images and other elements helps in reducing time to recognize them and to navigate fast, 
'fext that must be read should have high contrast over a contrasting background, such as 
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black over white, yellow over black, white over black, etc. Font size should be large 
enough for comfortable reading so as to reduce strain in the eyes. 

(xvi) Human Memory Limitations 

Human memory has many limitations, which has to consider while designing 
ettective intertaces. Information should be organized in small chunks of data, which 
should match user expectations. Let users recognize rather than recall information. 

(xvii) Modality 

Using modes is another important task in any interface design. A mode is an interface 
state where what the user does has different actions than in other states (e.g. changing the 
shape ol the cursor can indicate whether the user is in an editing mode or a browsing 
mode). 

1 .2.2 Fitts’s Law 

Interface design is always based on the interpretations. A design, which can work for 
one person, may not work for other. Designers can rely on one rule for interface design, 
known as Fills 's Law. This law can be applied to software interfaces as well as web site 
designs as it involves the way people interact with mouse and other pointing devices. 
There are certain characteristics of visual elements on the screen that make them easy and 
hard to click on. The farther is mouse pointer from the target, the more effort it will take 
to reach on. Also if target is smaller, it’s difficult to click upon. This shows that, it is easy 
to target bigger icons near to the mouse pointer. 


Text Link 


Button 


Figure 1.2.2: A Text link and a rectangular button 
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For example, we can see trom figure 1 .2.2 that a text link can be clicked only over the 
text area and there is no additional area around to click upon, whereas a rectangular 
button gives a sutticient area to access it by mouse pointer 

It seems intuitive that the distance moved would affect movement time and the 
precision demanded by the size of the target to which one is moving. Fitts discovered that 
movement time was a logarithmic function of distance when target size was held 
constant, and that movement time was also a logarithmic function of target size when 
distance was held constant. Mathematically, Fitts' law is stated as follows: 

Af7’=r/ + b log2 {2AIW) 

Where 

• MT = movement time 

• a, h = regression coefficients 

• A — distance of movement from start to target center 

• W~ width of the target 


1.3 Mental Models in Human Computer Interaction 

"In interacting with the environment, with others, and with the artifacts of technology, 
people form internal, mental models of themselves and of the things with which they are 
interacting. These models provide predictive and explanatory power for understanding 
the inleraclion. " 

-Norman (in Centner & Stevens, 1 983) 

1.3.1 Overview 

Mental models are cognitive structures that have an important impact on everything 
we do. Whenever human being interact with their environment, they develop internal 
representations of it. Such representation in head are known as Mental Models. These 
models have been studied by cognitive scientists as part of efforts to understand how 
humans know, perceive, make decisions, and construct behavior in a variety of 
environments. The relatively new field of Human-Computer Interaction (HCl) has 



adopted and adapted these concepts to further the study in its main area of concern 
(usability). A person may have several different models for different environment. 

Kenneth Craik formulated the theory of mental models in the early 40 ’s. He sought to 
provide a general explanation of the human thought based on the assertion that humans 
represent the world they interact with through mental models. Johnson Laird (1983) based 
his theory on Craik's assumption stating that an individual holds a working model of a 
certain phenomenon in order to understand it. Mental models are not necessarily a visual 
representation of the real life case, neither they are more complex representations. 

1 .3.2 Types of Mental Models 

In the early 1 980's, two basic mental models were identified, which are Structural and 
fimctional models. Structural models, which are also known as Surrogate Model, define 
facts the user has about how a certain system works. On the other hand, functional 
models, also called Task-Action Mapping Models, are procedural knowledge about how 
to use the system. The main advantage of functional models is that they can be 
constructed from existing knowledge about a similar domain or system. Structural models 
are context free while functional models are context sensitive. 

1.3.3 Development of Mental Models 

When a person interacts with its surrounding environment, he receives sequences of 
stimuli that can be used either to activate a person’s existing mental models or initiate the 
development of new ones. If a model does not exist then learning processes provide the 
mechanisms by which new models can be generated. Second, if a model exists, but it 
leads to incorrect behavior then, through feedback and failures, models can be modified. 
We can see from figure 3.1.1, how learning process causes development of new mental 
models and modification of existing ones. 
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Mental Models 


Figure 1.3.1: Overview of the learning process 


As can be seen from figure 1, mental models are developed as a consequence ot 
learning activities; these may be both conscious and sub-conscious. 

1.3.4 Mental Models in HCI 

Most of the researchers have suggested four basic models in Human Computer 
Interface (HCI) that alTect the way users interact with a system. 

■ User's model of the system, which is the model, constructed at the users' side 
through their interaction with the target system. 

■ System 's model of the user, which is the model, constructed inside the system as it 
runs through different sources of information. 

■ Conceptual model which is an accurate and consistent representation of the target 
system held by the designer or an expert user. 









■ Designer's model of the user's model, which is basically constructed before the 
system exists by looking at similar systems or prototype or by cognitive models or 
task analysis. 

Figure 1.3.2 shows relation between all the above four mental models. 



Figure 1.3.2: Mental Models in HCI 


1.3.5 Design Considerations 

Software interfaces should be designed to help users build productive mental models 
of a system. Common design methods include the following factors: 

■ Simplicity: Since mental models simplify reality, interface design should simplify 
actual computer functions. A function should only be included if a task analysis 






shows it is needed. Basic, most frequently used functions should be immediately 
apparent, while advanced functions should be less obvious to users. 

Familiarity: As mental models are built upon prior knowledge, it's important to 
use this tact in designing a system. Relying on the familiarity of a user with an 
old, frequently used system gains user trust and help accomplishing a large 
number of tasks. 

Flexibility: An interface should allow users to choose the method of interaction 
that is most appropriate to their situation. Users should be able to use any object in 
any sequence at any time. 

Affordance: Affordances provide clues to how an object can be used and 
manipulated. An interface can take advantage of affordances by using real-world 
representations of objects in the interface. Users will intuitively know what to do 
with the object just by looking. 

Availability: Since recognition is always better than recall, an efficient interface 
should always provide cues and visual elements to relieve the user from the 
memory load necessary to recall the functionality of the system. 

Feedback: A system should provide complete and continuous feedback about the 
results of actions. Immediate feedback allows users to assess whether the results 
were what they expected. 



1 .4 Mind Maps 


A British Psychologist, Tony Buzan, originated the mind map concept in late 60’s. 
Mind map is a picture that represents semantic connection between portions of learned 
materials. Mind map is a natural function of human mind. It is a powerful graphical 
technique to explore the potential of the brain. It gives you the freedom to roam the 
infinite expanses of your brain. The mind remembers key words and images, not 
sentences. Because mind maps are more visual and depict associations between key 
words, they are much easier to recall than linear notes. The Mind Map can be applied to 
every aspect of life where improved learning and clearer thinking will enhance human 
performance. 

Tony Buzan suggests Mind Map Laws and “How To Mind Map?” in a step-to-step 
procedure. Here is brief description of Mind Map Laws. 

1 .4. 1 Mind Map Laws 

■ These are the brain-reflecting foundation structures of a Mind Map. 
The more of them you follow, the more effective your Mind Map. 

■ Start in the center with an image of the topic, using at least 3 colours. 

■ Use images, symbols, codes and dimensions throughout your Mind Map. 

■ Select key words and print using upper or lower case letters. 

■ Each word word/image must be alone and sitting on its own line. 

■ The lines must be connected, starting from the central image. The central lines are 
thicker, organic and flowing, becoming thinner as they radiate out from the center. 

■ Make the lines the same length as the word/image. 

■ Use colours - your own code - throughout the Mind Map. 

■ Develop your own personal style of Mind Mapping. 

■ Use emphasis and show associations in your Mind Map. 

■ Keep the Mind Map clear by using Radiant hierarchy, numerical order or outlines 
to embrace your branches. 
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1 .4.2 How To Mind Map 

■ I urn a large A4 (11.7" x 8.3") or preferably A3 (16.7" x 11.7"), white sheet of 
paper on its side (landscape), or use a Mind Map pad. 

■ Gather a selection of colored pens, ranging from tine nib to medium and 
highlighters. 

■ Select the topic, problem or subject to be Mind Mapped. 

■ Gather any materials or research or additional information. 

■ Start in the center with an unframed image - approximately 6cm high and wide 
for an A4 and 10cm for an A3. 

■ Use dimension, expression and at least three colours in the central image in order 
to attract attention and aid memory. 

■ Make the branches closest to the center thicker, attached to the image and ‘wavy’ 
(organic). Place the Basic Ordering Ideas (BOls) or the 'chapter heading' 
equivalents on the branches. 

■ Branch thinner lines off the end of the appropriate BOls to hold supporting data 
(most important closest). 

■ Use images wherever possible. 

■ The image or word should always sit on a line of the same length. 

■ Use colours as your own special code to show people, topics, themes or dates and 
to make the Mind Map more beautiful. 

■ Capture all ideas (your own or others’), then edit, re-organize, make more 
beautiful, elaborate or clarify as a second stage of thinking. 

1 .4.3 How to read a Mind Map 

• Start in the center - that is the FOCUS of the Mind Map 

■ Words/Images closest to the central image show the MAIN THEMES of the Mind 
Map. This is the start of the radiant hierarchical structure 

■ Select one main theme and read out from the center along the branch. This 
provides greater levels of associated detail. Proceed around the Mind Map, either 
in the order of your choice or as suggested by the author 

■ Notice links between the branches 
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Consider an example of “Elements of Creativity”. If we have to create a Mind 
Map for this topic, we should move according to the given figure 1.4.1. Starting with 
the major topics like purpose, brain, climate, techniques and process, it proceeds 
further into sub-topics of these topics. Finally we have a complete graph of “Elements 
of Creativity” with different nodes and link. Using these techniques, we can easily 
review all the parts and their relationships with other entities. 



What was the need to study Mind Maps? The answer is simple; this technique can be 
applied to almost every field where we need a structured approach to solve problem or to 
achieve a goal. This technique can be easily applied in the filed of information design, 
web design, and related fields. 





1.5 Iconic Communication 


Icons and symbols are major part of communication since from the evolution of 
human civilization and they are still used widely in almost every part of the world. The 
main cause ot their extensive usage is their expressiveness and independent nature. 
Comparing icons & symbols with the existing languages world over, they have a major 
advantage ol being accepted everywhere and amongst all human being of different 
ethnicity. 

1.5.1 History of Pictorial Communication 

History of pictorial communication is very old and people have been interested in 
pictures for a long time. According to art historians, early art was often iconographic. 
depicting symbols, as these Egyptian symbols for fractions illustrate, rather than aspiring 
to three-dimensional realism. Because of the potentially arbitrary relation between a 
symbol and what it denotes, a symbol itself is not a picture. Symbols, nevertheless, have 
Irom the very beginning found their way into many pictures, and we now must live with 

both the symbolic and geometric aspects of pictorial communication. 

tjr- '.n. 

In the 195()s, Charles Bliss developed a set of atomic icons that represent basic 
objects in the world and their features (Bliss, 1965). These can be combined to form 
complex icons that map on to the set of words found in natural languages (Figure 1.5.1 ) 
including such linguistic entities as pronouns. Blissymbolics has been used as the basis of 
several computer based systems of communication. 

0 3 ^3 ^ ^^3 


Mouth - Ear — Language- Electricity -Telephone 


Figure 1.5.1: The construction of the Bliss symbol for "Telephone" 
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1.5.2 Iconic Communication in HCI 

Our motive here is to discuss the role of icons and symbols in Human Computer 
Interlace. With the introduction ot WIMP interfaces (Windows-Icons-Menus-Pointer), 
possibilities for developing new forms of human communication based around images 
rather than te.\t has emerged. Focussing on terminology, the first question comes mind is 
“what icons are and why they are special?” The naive answer is that an icon refers to an 
object by simply representing it. Thus by recognising the image in Figure 1.5.2 as a man 
we know that it refers to a man. This is quite different from the word "man" whose 
relationship to the object it refers to is seen as arbitrary, conventional and simply has to 
be learned. 



Figure 1.5.2: Icon for 'man' 


Some people may recognize it as a man and some as a ‘class’ of men. The meaning of 
the icon may not simply be its denotation but rather its pragmatic effect. 

(liven that some signs are intended to rely to a greater degree on their iconicity then 
how are we to judge their success? Again, the most common assumption is that they are 
successl'ul if we can recognise their referent when we first see them. If a large proportion 
of people recognise what a particular icon stands for, then it is a successful icon. The road 
sign for a bridge does not try to represent the view that we normally have of a bridge, but 
more to tlie way that bridges are represented on maps (Figure 1.5.3). We first have to 
recognise this reference and then transfer it to our immediate environment. 


Figure 1.5.2: Icon for 'Bridge' 


'I'hc significant task of recognition is usually assumed to occur when the icon is first 
encountered, but there is a strong case to be made that it is more important that the 
meaning ol the icon is remembered. Icons are also rarely used in isolation. Whether we 
consider icons as road tralTic signs, for directions in zoos, or as tools within a computer 
program, the most common applications of icons is within sets. Here the criteria for 
success will not involve recognition alone but will also include differentiation from other 
icons in the set. 

'I'hc use of metaphors within icon systems has its own problems. Creating icons for 
every function can prove problematic. Many applications have a large number of 
functions and if every one has to be represented by a different icon this can be difficult. 
There are problems both in creating so many different images within what is traditionally 
a very limited medium (a 32 x 32 bit square), and also in displaying so many icons on the 
screen at the same time. One solution to these latter problems is that of grouping the icons 
into subsets, each of which is represented by another icon. Clicking on this 'group' icon 
will cause the subset to be displayed. 

Most of the researchers suggest that, use of icons should be seen in terms of syntax, 
semantics and pragmatics, which suggest a strong connection with linguistics. Any 
communication system must allow for change if it is to survive and be continually useful 
within its domain. It must be designed to change or it will become irrelevant. 
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1.6 Infographics 

September 11, 2001, the day when whole world was thrilled by the two terrestrial 
attacks on the World Trade Center. The whole world was eagerly waiting for the hot news 
and it was the high time for all the news agencies to provide the breaking news. Readers 
all over the world would surely wanted to see more, then text and pictures alone could 
provide. Visual journalists and graphic artists at every newspaper and TV-station got 
ready to do their business. It was hard to find good pictures fi'om an actual attack as 
everything happened unexpectedly. In one of the leading newspaper, a 2-Dimensional 
figure of plane hitting the building was shown and that was the first thing, which could 
explain the whole scene and sequences very effectively. Figure 1.7.1 shows the Path of 
Flight 1 1 and simultaneous sequences in a graphical form. 



Figure 1.6.1 Infographics of Flight 11, which attacked WTC 


1.6.1 Introduction 

Textual languages has always been the best tools to describe an idea, a story or a 
description, but the major disadvantages in textual descriptions are, (a) they are less 
appealing as compared to visual descriptions, (b) non uniform protocol for people from 
different regions of the world with different language background. Many major 







newspapeis used to describe highlighting events in a detailed textual description, but it 
was very inconvenient way to portray the events and information in the minds of users. 

lo solve this problem many editors started using pictorial representations to tell a 
stoiy or to explain any idea. Visual representations were found to be much more effective 
and impressive, as human mind accepts graphical representations very easily. Then 
started a new concept ot Informative graphics or Infographics. Informative graphics is 
now days used in print media such as newspapers, magazines books etc. World Wide 
Web is the major source ol information and infographics has become an essential part of 
it. Since with the advancements in the technology and faster communication systems 
inlographics has become more interactive and powerful with the effective use animation. 

1.6.2 Infographics in .lournalism 

While words are still the common means of communication for the journalist, they are 
in no way the only means, and on occasions they are not the most effective tools a 
journalist can use. I'he picture, chart or graph has always been a powerful way to convey 
information to a reader or viewer. The fact that newspapers, magazines and other 
publications arc using then more these days does not represent any discovery on the part 
of journalist. What it does reflect is the development of technology that allows these 
forms to be created and published more easily ad recognition by journalist that there are 
many means of presenting infonnation. Many publications have recognized the necessity 
of going beyond the paragraph. They have established staffs of graphic artists and 
journalists who actively participate in the coverage of the news. The trend towards more 
emphasis on graphics is not just a fad. Most publications now recognize that they need to 
present information in a variety of ways and that their readers are being trained to expect 
more visual pre.scntations. 

1.6.3 Infographics in Digital Media 

World Wide Web is now a days becoming a major source of information and it is no 
more isolated from informative graphics. With the availability of many tools to design 
static as well as animated graphics, information can be represented much more 
elTectively. Animated visuals are always found to catch attention of the user. Using 
animation it is very easy to describe even complex information in a small view area. 



WWW supports the interactive environments so that user can see what he wants. Paul 
Nixon, a web designer's page has links to good infographics. It has shown the examples 
ol interactive online maps. Infographics for War in Iraq and many more with effective use 
ot animation in many of the presentations. Animations and special effects are used now 
days to illustrate the information in an effective ways. For Example, for demonstrating a 
bank robbery using infographics, there can be many ways. First, a two-dimensional 
graphical presentation showing all the sequences on a time line, or using time stamps. 
Another way is to create a storyboard for all the sequences and showing them one by one 
with the help ol animations. This way is more efficient for information representation and 
can be implemented easily in a digital media. 

1.6.4 Infographics in Business Communication 
. Business presentations are no longer untouched by this art. There are number of 
infographics, but the most common ones are maps, chart, type-based and illustration 
based. Using a chart, crucial piece of data are depicted visually so that the reader can the 
point of data at a glance. A chart can show trends over time and the relationships between 
different pieces of information. Maps are generally used to show geographical 
information. A type-based infographics provides condensed small bits of information in a 
geographically designed space. Illustration based infographics are diagrams or cross 
sections of objects which exists in 3D space. 

There are some basic rules, which should be considered while making infographics. 

• Simple is always better 

• Do not use too many colors or fonts 

• Choose appropriate type of infographics for the infomiation 

• Always use headings, labels for better description 

Infographics can help in communication the ways that we have not thought of 

• Business Plans 

• Reports 

• Articles 

• Trial Presentations 

• Product Manuals 
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1.6.5 Cartography 

Journalism is not the only field where infographics is used to present information. 
Now a days almost every field where there is a need to present any information, visual 
presentations are preferred. One of the oldest applications is Cartography. Cartography is 
the scientific name for mapmaking. It is one of the most versatile of human creations. It is 
useful for activities ranging fi-om the sciences to the arts, from the speculative to the 
practical and from the real to the unreal. Maps are a way of organizing geographic or 
spatial data for use in human activities. The map serves as an intermediary between a 
person and the environment by helping people to manage or navigate the environment. 
Maps have a wide variety of uses and aid us in many ways. When we think of maps, we 
often think of them as navigation tools. They also have other uses as in helping us to 
interpret data like land elevations, weather patterns, crop production, etc. 





m:,, 




I? 






Figure 1 .6.2 The World Map, an example of Cartography 


1.6.6 Two-Dimensional v/s Three Dimensional 

Most of the graphics found in print media is two-dimensional as it can be easily made 
in a short span of time and the output in the low cost print media is much better. But the 
main problem comes when we need a different view of the same graphic element. In that 
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case it becomes essential to reconstruct that element. Now, here comes the 3D-concept 
and presents itselt as a better solution. We still need a person to obtain the reference- 
material and possibly even allocate more time than before to draw a 3D-model of the 
object. But now we can use this model in countless positions and thus avoid being 
visually boring by repeating. We can even zoom in and out on the model, - if the model is 
detailed enough it’s almost like having the object physically located in your computer for 
you to use again and again, but never in the exact same way. When it comes to software, 
we have the options from Illustrator, Freehand, Photoshop, and Flash etc. In 3D we can 
go to Cinema4D, 3DS Max, Maya, Light wave. Rhino, Poser, Bryce, Amapi, Swift, 
Carrara etc. 


1 .7 Infomation Visualization 

Information representation is becoming a challenging task when it comes to handle 
large and complex data or information. Information visualization, the computer assisted 
use of visual processing helps in better understanding of information by the means of 
graphical representations and simulations. Information visualization is the design and 
creation of interactive graphic depictions of information by combining principles in the 
disciplines of graphic design, cognitive science, and interactive computer graphics. As the 
volume and complexity of the data increases, users require more powerful visualization 
tools that allow them to more effectively explore large abstract datasets. This thesis 
involves the study of such visualization tools and to device new techniques to implement 
into modern information systems such as Pubic Information Kiosk. 

1.7.1 Background 

The History of information visualization is very old, around 38,000 years BC, long 
before any written language appeared. 8,000 years ago the Sumerians already used tables 
to keep count of their economic transactions. 2800 years after that they used a 
pictographic language with almost 2000 signs. At the same time the Egyptians developed 
their hieroglyphic writing, which would last for another 3,000 years without essential 
changes. 
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From pre-historical times up to the middle ages we can find many examples of the 
developments and innovations related to the visual representation of knowledge. Initially 
the one requirement ot people was to represent different places and locality in an easily 
understandable format, so the idea of maps evolved and hence a new science called 
cartography, came into the picture. Cartography is the art, science and technology of 
making maps, together with their study as scientific documents and work of art. 

1.7.2 Information Visualization Tools 

Information Visualization is the use of computer-supported interactive visual 
representations of abstract data to amplify cognition. Whereas scientific visualization 
usually starts with a natural physical representation. Information Visualization applies 
visual processing to abstract infonnation. It is the computer-assisted use of visual 
processing to gain understanding, has become a topic of significant development and 
research. Graphical or visual presentations and simulations are considered as the best 
tools for understanding and learning a complex problem. Graphics is the visual means of 
resolving logical problems. The key objective is to represent the information or data 
through the means of visuals, so we need to understand the data and its various forms. 

(i) Data 

Information visualization starts with information in the form of data. There are many 
forms that this data could take, from spreadsheets to the text of novels, but much of it can 
be represented as cases by variable arrays or can be transformed into this form. Text, for 
example, can be used to compute document vectors, normalized vectors in a space with 
dimensionality as large as the number of words. The different data types are important in 
their own right; text has its own characteristic operations, in fact the subcategories of 
patent text or fmancial report text have their own unique characteristics and potential 
unique operations on them. 

(ii) Visualizations 

An elementary visual presentation consists of a sat oi' Marks (which could be Points. 
Lines, Areas, Surfaces, or Volumes), a Position in space and time (the X, Y plane in 
classical graphics, but X, Y, Z, T 3D space plus time in infomiation visualization), and a 



set ot Retinal properties, such as Color and Size). Thus, visualizations are composed 
h’om the following visual vocabulary: 


Murks: 

Automaticity 

Position: 

Retinal encoding: 


Point, Line, Area, Surface, and Volume 
Processed Graphical Properties 
X, Y, Z, and T 
Color, Size, Shape 


1 .7.3 Types of graphical methods 

Ihere are diflerent types of graphical methods, which are generally used for 
visualizing inlormation. It can be in 1 -dimension, 2-dimension, 3-dimension or multiple 
dimensions. Also they can be temporal, hierarchical or network. 


'fhe Graphic Method Should Depend on the Data. The following table 1.7.1 shows the 
type of method applied to a particular kind of data. 


1- Dimensional 

Program source code 
Wrapped lines 

2- Dimensional 

Geographic data, floor plans 
Maps 

3- Dimensional 

Volume data in real world 
Needs slicing, transparency, 
and multiple views 
Multi ~ Dimensional 
Most databases 
Dynamic queries in 2D or 
3Drepresentations 


Temporal 

Animation (transitory) 
Users need control for: 

• Speed 

• Step-by-step 

• Start and end points 
Time lines 

Hierarchical 

Budget 

Trees 

Networks 

Communication networks 
Node-link diagrams 


Table 1.7.1: Types of graphical methods 





Some of the examples are as follows: 


1 . One - dimensional 



Figure 1.7.1 One Dimensional Visualization 


2. Two - dimensional 



Figure 1.7.2 Two Dimensional Visualization 




3. Three Dimensional 



Figure 1.7.3 Three Dimensional Visualization 


4. Multi-dimensional visualizations 
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Figure 1.7.4 Multi Dimensional Visualization 




nil 


5. Networks 


Figure 1.7.5 Network Visualization 


6. Hierarchical 


Figure 1.7.6 Hierarchical Visualization 





7. Temporal 
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Figure 1.7.6 Temporal Visualization 




1.8 Usability Engineering 


1 he words ^ usability’ and ’usability engineering’ have been in use for some time now. 
Usability evaluation methods are used in industry to measure the usability of products so 
usability is not a concept that is found associated with computers alone. 

fhe International Organization for Standardization (ISO) defines usability as: 

...the effectiveness, sufficient and satisfaction with which specified users can achieve 
specified goals in particular environments... 


ISO DIS 9241-11 

The term usability came into existence in early 90’s in order to replace the term “user 
friendly”. However, in the past few years, the word usability itself has become almost as 
devalued as the term it was intended to supplant. There are still many different 
approaches to making a product usable, and no accepted definition of the term usability. 
The definitions, which have been used, derive from a number of views of what usability 
is. I’hree of the views relate to how usability should be measured: 

■ The product-oriented view, that usability can be measured in terms of the 
ergonomic attributes of the product; 

■ The user-oriented view, that usability can be measured in terms of the mental 
effort and attitude of the user; 

■ I’he user performance view, that usability can be measured by examining how the 
user interacts with the product, with particular emphasis on either 

- Ease-of-use: how easy the product is to use, br 

- Acceptability: whether the product will be used in the real world. 



1 .8. 1 Lite cycle ot usability engineering 

Usability engineering is a process. It ensures that usable software is produced and that 
user requirements are met. The system is guaranteed to be what the user wants and needs. 
1 able 1.8.1 describes usability-engineering life cycle. 


Task 

Know the user 

Know the task 

User requirement capture 
Setting usability goals 
Design Process 
Apply guidelines, heuristics 
Prototyping 

Evaluation with the users 
Redesign and evaluate with the users 
Evaluate with users and report 


Information Produced 

User characteristics 
User background 
User’s current task 
Task Analysis 
User requirements 
Usability specification 
Design 

Feedback from design 
Prototype for user testing 
Feedback for redesign 
Finished product 

Feedback on product for future systems 


Table 1.8.1: The usability engineering life cycle model 


1.8.2 Understanding of user 

Before designing a system or product for users, it is very important to understand the 
users. IF a .system is not been able to meet users expectation, then it’s a failure, no matter 
how much intense research has been put into the designing phase. To meet users 
requirement and to achieve the level of satisfaction, it is very important to study users 
behavior and psychology. User can be classified in different classes. User can be 
direct, indirect, support or support. On the basis of expertise level, user can be novice. 
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intermittent or expert. Information can be gathered from the users using following 
methods; 

■ Informal and formal discussions 

■ Observation 

■ Putting an expert on the design team 

■ Questionnaire 

■ Interview 

The following Table 1.8.2 shows user characteristics, which needs to be considered in 
user study: 


User information: 

■ Age range 

■ Educational background 

■ Skills 

■ User classification 


Use of the system 

• Discretionary or mandatory user 


Job details: 

■ End-user class 

■ Brief job description 

■ Main skills 

■ Responsibilities 

■ Control of work load 


Table 1.8.2: User characteristics 




1 .8.3 Task analysis 

1 0 achieve a desired goal user has to go through a series pf processes and task execution. The 
next important thing after user analysis is Task Analysis. In 1988 Nonnan introduced an Action 
Cycle Model. I he action cycle is formed of seven stages: one stage for goals, then three for 
execution and three for evaluation (Figure 1.8.1). 



Figure 1.8.1: Normal Action Cycle 
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Norman suggests that a large number of the difficulties that people experience when 
they perform everyday tasks are due to poor relationship between the intention of the 
actor and the physical actions that can be performed on the object they are working with, 
and the state of that object. 

A task consists ot an input and output and a process that transforms input to the 
output. The process of task analysis should produce a clear understanding of what it is 
that the system must do. There is no method, at present, for ensuring a better solution 
using task analysis; that requires inspiration! 

1.8.4 Usability Attributes 

The dellnition for usability given by ISO gave a starting point in the study of usability 
of a system, but there were no attributes, which could be measured. ISO doesn’t suggest 
how efficient, how effective or how satisfying the system must be. So there came a need 
to modify the attribute definitions so that they can be measured and interpreted. If a 
system achieves measurement, then we can say that the product is usable. 

(i) Effectiveness 

The effectiveness of a system can defined as: 

The success to failure ratio in completing the task. 

The frequency of use of carious commands of particular language 
features/functions. 

- I'he measurement of user problems. 

- The quality of the output. 


(ii) Efficiency 

An efficient system, ought to require as little effort as possible: 

- The time required perfonning selected tasks. 

■fhe number of actions required in order perfomiing a task. 

- The time spent looking for information in documentation. 

- I'he time spent using on-line help. 

- The time spent dealing with error. 
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(iii) User satisfaction 

It seems unlikely that it would be possible to measure the satisfaction of the user 
while using the system. However, a useful measurement of a user satisfaction can be 
made it the evaluation team’s measurement is based on observation of user’s attitude 
towards the system. 

(iv) Learnability 

A system should be easy for the user to learn so that it is possible to use it effectively 
as quickly as possible. How easy a system is to learn can be measured in terms of a 
novice user’s experience of learning how to operate it. A system that is easy to learn will 
cause the user to be able to carry out a large amount of tasks in a short space of time, thus 
rellecting how the user quickly learns to operate some areas of the system. 

1 .8.5 Conclusion 

Usability lies in the interaction of the user with the product or system and can only be 
accurately measured by assessing user performance, satisfaction and acceptability. Any 
change in the characteristics of the product or system, user, task or environment may 
produce a change in usability. A product is not itself usable or unusable, but has 
attributes, which will determine the usability for a particular user, task and environment. 
These attributes include not only the specifically ergonomic characteristics but also all the 
characteristics of the product, which impinge on usage including those aspects of 
software quality (such as efficiency and reliability), which affect ease of use. For a 
software product, usability is the user's view of software quality. 



Chapter 2 

Interaction over touch screen systems 


2.1 Introduction 


With the introduction of touch technology in computer screen, a new field is coming 
up, which deals with the interaction design issues over the non-conventional modes of 
interaction with the computer systems such as mouse, keyboard, joystick etc. The 
implementation of touch screens has solved many problems for novice users and first 
time users in regards of their interaction with the computer technology without creating 
any fear of complex input from keyboard or mouse usage. Users can touch whatever he 
can see on the computer screen. This is like interacting with the real life environment. 

This section will describe about the touch screen technology and its implementation in 
various public systems. A brief case study and some advanced research in this field has 
also been discussed in this section. 


2.2 Touch Screen Technology 

Dr. Sam Hurst, founder of Elographics. developed the first "Touch Sensor" while he 
was an instructor at the University of Kentucky in 1971. This sensor was called the 
'[■’loaraph". and was patented by fhe University of Kentucky Researcii l oundation. i ne 
"Elograph" was not transparent as are touchscreens, but was a significant milestone for 
touch technology. 



1 he fust true touchscreen came on the scene in 1974, again developed by Dr. Hurst, of 
lilogiaphics. In 1977, biographies developed and patented five-wire resistive technology, 
the most popular touchscreen technology in use today. On February 24, 1994, the 
company otticially changed its name from Biographies to Elo TouchSystems. 

When it comes to touchscreen technology, the five most prevalent types are 
Capacitive, Infrared, Resistive, Surface acoustic wave (SAW) and Guided Wave with 
Resistive and Capacitive being the most widely used types for industrial applications. All 
ol these technologies have their own distinct characteristics, both advantageous and with 
limitations, fouch technologies differ in the way a touch is detected. With scanning 
infrared systems, a touch is registered when a finger or stylus encounters an array of 
inlrared beams. When a user's finger touches a surface-acoustic-wave touch screen, the 
screen absorbs the acoustic waves propagating on the touch surface. The controller 
electronics identify a touch by the drop in acoustic signal from the touch location. 
Capacitive technologies use the conductivity of a finger to shunt a small alternating 
current to ground through the operator’s body. Resistive touch technologies are based on 
two layers of conductive material held apart by small, nearly invisible spacers. When the 
screen is touched, the two layers come in contact, and two-dimensional coordinate 
information is generated by the voltages produced at the touch location. Resistive touch 
screens are most frequently used in medical equipment, but they also can be found in 
handheld computers, personal digital assistants, industrial equipment, point-of-sale 
equipment, office automation equipment, and consumer electronics. 

2.2.1 Capacitive Touchscreens 

Capacitive touch screen technology is recommended for use in K.10SK applications 
that require a "finger touch". It will not operate with either a gloved hand or with a 
mechanical stylus. It is made of glass, which makes it extremely durable and scratch 
resistant. This glass overlay has a coating that stores the charge deposited over its surface 
electrically. Capacitive touchscreens operate using oscillator circuits that are located in 
each corner of the glass overlay and measure the capacitance of the area be "touched". 
Depending on where the person touches the overlay, the oscillators will vary in 
frequency. Then a touchscreen controller measures the frequency variations to ascertain 
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the coordinates ot the person's touch. When used with flat panel displays, capacitive 
oilers drift-tree stable pertormance that is not susceptible to deterioration over time. A 
capacitive touchscreen is impervious to grease, dirt and water, which makes it ideal for 
frequent use. 

2.2.2 Infra-red Touchscreens 

Infrared touch screen technology is based on "legacy" technology and is becoming 
increasingly replaced by Resistive or Capacitive touch systems. Over the years. Infra-red 
bezels have proven to be a very reliable technology for use in ATMs, Food Service and 
Preparation, KIOSK, Medical Instrumentation, Process Control Systems, and 
Transportation 'Tracking applications. It does not incorporate any sort of "overlay" that 
could inhibit screen clarity or brightness, but instead, uses a special bezel of LEDs (light 
emitting diodes) along with diametrically opposing phototransistor detectors which 
surround the glass of the of the display surface. The controller circuitry scans the screen 
with an invisible lattice of infrared light beams just in front of the surface that directs a 
sequence of pulses to the LED's. It then detects information at the location where the 
LJiDs have become interrupted by a stylus or finger. The infrared frame housing the 
transmitters can impose design constraints on operator interface products. A few 
limitations are (1) that they usually require low-resolution output of the monitor, (2) can 
produce activation without touching the screen and (3) the cost to produce the special 
Infrared bezel is quite high. 

2.2.3 SAW (Surface Acoustic Wave) 

SAW touch screen technology is suggested for use in ATMs, Amusement Parks, 
Banking and Financial Applications, Gaming Environments, Industrial Control Rooms, 
and KIOSK. SAW touch cannot be used within NEMA environments, as the technology 
cannot be gasket sealed. It has excellent durability that allows it to continue working if 
scratched since the overlay for the touch sensor is a solid glass display. The disadvantage 
to this glass overlay is that is breakable and won't work in wash down conditions. The 
waves are spread across the screen by bouncing off reflector arrays along the edges of the 
overlay. Two “receivers” then detect the waves. The acoustic wave weakens when the 
user touches the glass with their finger, gloved hand or soft stylus. I'he coordinates are 
then determined by the controller circuitry that measures the time at which the amplitude 
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declines. It is the only technology that can produce a Z-coordinate axis response. SAW 
technology offers drift-free stable performance that is always precise. SAW offers 
superior image clarity, resolution, and high light transmission. 

2.2.4 Resistive Touchscreens 

Resistive touch screen technology is recommended for use in POS (Point of Sale): 
Grocery Stores, Hotels, Restaurants and Retail Stores; Industrial Applications: MMI 
(Man Machine Interface), Machine and Process Control; Portable Devices; Personal 
Information Management Systems; Transportation Solutions; Medical Solutions: 
Equipment, Instrumentation and Patient Monitoring Systems. It generally uses a display 
overlay composed of layers, each with a conductive coating on the interior surface. 
Special separator "dots" are distributed evenly across the active area and separate the 
conductive interior layers. The pressure from using either a mechanical stylus or finger 
produces an internal electrical contact at the "action point" which supplies the controller 
with vertical and horizontal analog voltages for data input. To reduce parallax for older 
"curved" CRT applications only, resistive touchscreens are generally spherical to match 
the curvature of the CRT (true flat resistive touch overlays are also available for TFT flat 
panels and/or CRTs). Our resistive touchscreens are anti-glare to reduce reflective shine 
intensity, which will slightly diffuse the light output throughout the screen. Resistive 
technology offers tremendous versatility in that activation can be initiated by; a gloved 
hand, fingernail, mechanical stylus or an ungloved finger. 
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Figure 2.2. 1 : Components of a five-wire resistive touch screen. 


Although resistive touch systems are available in 4, 5, and 8-wire variants, five-wire 
resistive touch screens offer a good combination of features for use in medical 
applications because oi their construction. Five-wire resistive technology involves a glass 
substrate overlaid with a suspended polyester cover sheet. Because of its simplicity, five- 
wire resistive technology is extremely easy to integrate and, therefore, is less expensive 
than alternative touch options. 

Five-wire resistive touch screens have a glass panel with a uniform, resistive metallic 
coating. A thick polyester cover sheet is tightly suspended over the glass. Small, 
transparent insulating dots are used to prevent the two surfaces from contacting each 
other until the screen is touched lightly with a finger or stylus. The cover sheet has a hard, 
durable coating on the outward-facing side to reduce damage from sharp styli and a 
conductive metallic coating on the inward-facing side (see Figure 5). A touch on the 
screen pushes the conductive coating on the cover sheet against the coating on the glass, 
making electrical contact. 

I'o determine the coordinates of the touch location, a voltage gradient is first applied 
along the x-axis and then along the y-axis. When a finger or stylus presses the two layers 
together, the x-axis and y-axis voltages at the point of contact are measured. The voltages 
produced by the electrical contact are the analog representations of the position touched. 
The control electronics then transmit the coordinates of the position to the host computer. 
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Figure 2.2.2 A five-wire resistive touch screen concept 
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2.3 Implementation of touch screens 


There are many fields where touch screens are widely used. Because of their easy 
usage, they are preferred for public information systems considering many users who has 
never seen or used computer ever in their life or less firequent users. Some of the 
implementations of touch screens are as follows: 

1. Automated Teller Machines 

Most of the automated teller machines have touch screen interfaces. The interface 
in such systems is limited to few options, hence user can easily withdraw money; 
generate queries about his account etc. 



Figure 2.3.1 Touch screen interface of an ATM Machine 

2. Public Information kiosks 

The widely used application of touch screens is public information kiosks. These 
kiosks generally provide information in the form of interactive presentation 
supported by audio feedbacks. Users can easily select their choices and desired 
information just by touching the given links. Some of the kiosks allow users to 
enter their personal information. For that purpose the following techniques are 
used generally: 
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Figure 2.3.2 Public Information Kiosk 


■ Virtual. Keyboard is an application, which consists of an array of buttons on 
the screen arranged in similar fashion as of real keyboard. User can touch 
the keys on the screen and can get the functionality of a real keyboard. 



Figure 2.3.3 A virtual keyboard in Microsoft Windows 2000 
■ Option selection-using check boxes or toggle buttons. 


3. Personal Digital Organizer (PDA) 

PDA is a handheld computing device, which can be carried easily in a pocket. 
Because of its compactness, the mode of input is through touch screen. Since the 
resolution is very low, finger touch cannot be used for high precision. For that 
purpose a stylus pen is used instead of finger. 
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Figure 2.3.4 A PDA with a stylus 


4. Tablet PC 

Tablet PC is a type of notebook computer that has an LCD screen on which the 
user can write using a special-purpose pen called Stylus. The handwriting is 
digitized and can be converted to standard text through handwriting recognition, 
or it can remain as handwritten text. The stylus also can be used to type on a pen- 
based key layout. 



Figure 2.3.5 Tablet PC from Apple 


5. Gaming / Entertainment 

Touchscreens are used in many gaming/entertainment systems including video 
lottery terminals (VLTs), lottery ticket dispensing machines. Touch-based VLTs 
are found in social venues, restaurants, and casinos. Multiple games can be 
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available on a single machine giving users the option to play poker, blackjack, 
keno, and other games, without changing machines. 



Figure 2.3.6 Touch screen based gaming equipments 


6. Point-of-Saie (POS) Terminals 

Touchscreens are the preferred input device for operators at checkout counters, 
restaurants, quick-serve chains, and retailers. Many major restaurant companies 
are using touch-based POS terminals because they offer many advantages over 
traditional cash registers. 



Figure 2.3.7 A point-of-sale terminal 
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7. Industrial and Medical Instrumentation 

The practical application of touchscreens with medical equipment is wide and 
varied. Touchscreens act as an interface for improving the efficiency and accuracy 
of analytical instruments, sophisticated x-ray and ultrasound machines, and 
cardiac management machines. 



Figure 2.3.8 Touch screen interface of a medical instrument 
8. Automotive accessories 

Automobiles nowadays are coming up with latest technology of navigational 
systems such as Global Positioning Systems (GPS). Touch screens are widely 
used in such applications for allowing the driver to navigate through various road 
maps and different controls over the screen. 



Figure 2.3.9 Touch screen interface of a GPS equipment in a car 


2.4 User interface design issues for touch screen 
based public information kiosks 


1 here is a continuing trend to develop terminals to deliver information and services to 
the general public, accessible in public locations. These terminals, or kiosks, can deliver 
services at the point ot need, and at low cost. If the kiosks are networked, information can 
be transmitted electronically to many sites rapidly to update the database or provide on- 
line user access. 

2.4. 1 User requirement definition for the kiosk 

An important lirst step is to define the purpose of the kiosk, the user population who it 
is intended to serve, and their task goals. It is also necessary to consider typical task 
scenarios defining specilic examples of people using the kiosk It is also important to 
understand the characteristics of the user population and the kinds of environment 
(physical and organi/atioiial) that the system will be located in, so that the design can 
reficct them. 

2.4.2 Physical access 

The height of a kiosk has to be placed so that it is convenient for both standing users 
and wheelchair users to access the keyboard. Wheelchair users may have to line 
themselves up alongside the kiosk and twist around to use it. 


2.4. .3 Encouraging use 

A self-running demonstration is a good way to encourage users to approach the 
system and to find out what it can provide. Such demonstrations should be bright and eye 
catching, presenting short phases about what is on offer and typical screens. It should also 
be clear that the demonstration could be interrupted to start using it and how this can be 
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2.4.4 Language selection 

ll is desirable to provide multilingual interfaces to the system where languages other 
than the primary language are widely spoken in the local community. In order to choose 
the language on the system, instructions can be given in each language to select the 
appropriate option. If it is not possible to present all the information in different 
languages, then just the most critical information could be translated. 


2.4.5 Introduction for instructions for using the system 

Users will not have the time or inclination to read lengthy instructions displayed on 
screen before using a system. Therefore the instructions should be short and presented at 
each stage t)f the interaction. A good way of introducing users to the system is to present 
a I'ree running demonstration of it, possibly with simulated interactions. A demonstration 
can sln)w users what the system is about, what to expect when they start to use it, and 
how to interact with it. However such demonstrations should be short enough to be 
viewed by the interested user and allow them to start interacting with it before their 
interest diminishes. 


2.4.6 I lelp 

It is useful to provide help information throughout the system. It is therefore 
preferable to review each part of the system and decide what help may be needed at each 
stage. This can then be presented to the user as contextual help, which can be accessed 
with a single press of a button, labeled HELP, or with a question mark (?) This may also 
be coloured red to make it stand out. 


2.4.6 Input to the system 

1 he nature of the input used should be as consistent as possible throughout the task. If 
a new form of input must be employed at any point (e.g. moving from a keypad to a 
roller-ball) this mu.st be highlighted with specific instructions at that point. User inputs to 
a kiosk system should be as simple as possible. 

1 he user should only be required to make one input at a time, either selecting an 
option on screen, typing in a short text string, or highlighting a menu option and 
confirming the selection. It the user is entering a number or text string into a field, it is 



ncccssdi)' to ensuie that the input position or locus on the screen is clearly highlighted. It 
is also inipoitant that the inputted characters are clearly distinguished from the system 
prompt by colour, lont, and case. Mode ol input can vary from application to application. 
Some of the examples are as follows: 

1. Keyboards and keypads 

It a physical keyboard is required, it is preferable for the kiosk system to have a 
customized keypad with large clear keys and suitable key labels. 

2. Speech input 

Speech input is rarely used on a public kiosk. The increase in the reliability of 
speaker independent speech recognition systems now makes it a possibility. The 
main problem is that pronunciation and speech intonation vary between people 
tind when speaking, people tend to run words together. Speech systems work best 
when the user is lamiliar with them and can speak words distinctly. 


3. Touch screens 

Touch screens provide a way of presenting keys or touch areas on screen, which 
can be changed for individual screens in the dialogue. Touch screen buttons are 
therefore a flexible solution for input via a kiosk. For each screen display, the 
relevant input buttons only, need be shown on the screen, thus simplifying the 
interlace. 


4. Other input devices 

'fhe mou.se is now a familiar input device to many people but can take a little time 
for novice users to become compxtent with them. Also a mouse can easily be 
detached and stolen from a public system. Web cam can be used to keep track of 
the user for security reasons or it can be used to provide live video to user itself 
for catching user’s attention. 

m A... 



2.4.7 Output from the system 

1 ho output Irom the system is the main element of the whole system. The output can 
be ini'ormation, a feedback or a warning through different modes such as visuals, sound, 
paper prints etc. wedt describe these elements in detail here; 

1. Text 

lextual information is the most common form of output. The presentation of 
information on a display should be kept as clear and simple as possible. Text should 
be no smaller than 16 point (preferably larger) so that members of the public with 
visual impairments can easily read it. The contrast between the text and symbols, and 
the background, should be high whether it is dark text on a light background or light 
text on a dark background. 

2. Colour 

Colours are used in interfaces frequently to enhance the visual appeal. Also colours 
can help in grouping the critical information displayed on the screen. However the use 
of loo many colours can produce a confusing display. The number of colour codes 
should be kept within reasonable limits (4 or 5) if the user is to easily identify 
particular elements easily e.g. symbols or areas on a map. Here significant 
components of the display, e.g. buttons, input fields or icons should be made to stand 
out by putting distinctive borders around them or placing them within a plain area on 
the screen. 

The following guidelines are also proposed in relation to colour: 

■ Total colour blindness is rare, but problems in discriminating red and green are 
common and suffered by over 6% of the male population (Gill, 1997). 


■ Large adjacent areas of red and blue should be avoided as users have difficulty 

focusing on these colours at the same time, causing visual fatigue 
(Helander, 1987). 

■ Use colours to structure the display and group categories of data, and to help 
identification (labels, entry fields, prompts). 



■ Use colout as an additional cue to help users recognize graphic symbols (RACE 
ISSUE, 1992). 

■ It text is to be used, it should not be colour-coded. Similarly text associated with 
graphical symbols should not be coloured (Clarke et al, 1996) 

■ C oloured text is preferable tor short or temporary elements such as menu choices 
or messages rather than permanent elements such as long lines of text. 

■ Start by designing the display in monochrome. Then add colours, maintaining 
consistency in use, and test to ensure the resulting display does not create 
unexpected elTects, (RACE ISSUE, 1992). 

3. Use of language 

Terms used by the system should be meaningful to the general public. Care should be 
taken while using terms related to computers, as they may be new to the user. While it 
is appropriate to use such terms when they are commonly used in the application area, 
it may be necessary to provide an explanation of them on a help page. 

4. Icons 

Icons provide an easily recognizable form of information element that can be 
understandable by people from different ethnicity. For a kiosk system icons must be 
understandable without too much explanation, and distinguishable from other icons 
on screen. Simple icons are preferable to complex digitized images. It is important to 
test out any icons used by the system to check that they are clearly understandable. It 
is however very difficult to design icons that are self explanatory to all users. One 
solution is to place the meanings of icons within the system introduction, on a help 
page, or as short labels under the symbols themselves. 

5. Feedback 

fhe feedback from the system should be very quick and shouldn't take more then 50 
milliseconds. If it will take more then 2-3 seconds, user may feel that some fault has 



occuiitd. 11 some process is taking more time then animated status icon should be 
displayed. I he feedback can be ot any visual animation or a small audio clip. 

6. Images 

Photographs or images are used to represent factual and documentary information. 
1 hey should therefore be used to reproduce things as close to reality as possible. 
Coloured images appear livelier and if showing, for example, people or landscapes, it 
is natui'al to use colour. Black and White images are suitable for showing a concept or 
tlieme in general terms, or to ensure that an image does not distract the user too much 
Irom the text. Simplifying or emphasizing certain details on an image requires some 
graphic design skills. 


7. (Jraphics 

(iraphics (or diagrams) are good for schematic representations, expressing ideas, or 
futuristic objects. Where an image is of poor quality, and contains a certain amount of 
detail, a graphic may be clearer than a photograph. Graphics can be used to show 
things that do not exist in reality, or can be used to simplify a picture or accentuate or 
highlight essentials. A graphical expression should be as simple and pure as possible. 
Sometimes black and white graphics with high quality gray shades are more legible 
than too colorful an illustration especially as colour displays do not always render all 
the colours as intended. Graphical coding of objects can be effective; for example, 
different shaped elements representing components on an electrical circuit, colours to 
show political boundaries on a map, line lengths and angles to represent wind speed 
and direction, etc. 

8. Speech Output 

There is a growing use of speech output to provide guidance, to supplement screen 
information, or to transmit information as part of a multimedia presentation Speech 
should be used sparingly when the system is in a public place to avoid sound 
pollution. Having a visible speaker can add impact to the voice output and as an 
"interface agenl" can point to items on screen. 



2.4.8 Navigation and structure 


1. Navigation 

1 he Liset should be provided with some basic controls for navigating through the 
system. 

[examples of useful controls that may be considered are; 

■ Skirt, Finish, and Restart - Start or finish interacting or exit and start again. 

■ Step hack or Go hack - Go back to the previous screen or step in the 

interaction. 

■ Next pa^e, previous page - Step through information screens. 

■ Fjiter or OK - Complete keyboard input, select menu option or 
acknowledge .system message. 

■ ( 'ancel or Flxit - Cancel or exit from the current part of the system. 

2. ll.scr Interface Structure 

Kiosk system should present a clear and simple structure to the user. By doing 
this, the user will feel more confident in moving or navigating through the system. 
The system should have a single starting point, which the user can return to when 
they wish. 

The interface should covey a clear structure to the user such as: 

■ A sequence of screens where the user makes a selection at each stage in 
order to reach some useful information. 

■ A set of on-screen objects that, when selected, present information in a 
window, dialogue box or speech bubble. 

■ A network of screens, which allow the user to browse randomly 
supported by an overview map to show paths. 


liach screen should also have a clear title, which is short and distinctive. This will 
help the user maintain an idea of their location within the system. Hypertext links 
which allow the user to jump around within a network structure are appropriate 
for special applications where the user simply wishes to browse through screens 
looking lor information of interest. However users are unlikely to form a good 
mental picture of the structure and so may find it hard to navigate with certainty. 
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3. Menus 

Menus provide an easy means ot input for kiosk users since they simply select the 
input they require Irom a list ot options. Make sure that each menu option is concise 
and clearly worded so that the user has a good idea of what they will get when making 
a selection. 

General menu design guidelines are as follows: 

■ Ideally a maximum of 12 options should be presented on one menu. 

■ Menu lists require careful structuring, such as by alphabetical order, the 
most common options first, or in the logical order in which they will be 
selected (e.g. search, display, print). Blank lines between groups of 
items in a menu can help emphasize the structure. 

■ Abbreviations should be avoided in menu options unless well known to 
the public. 

■ Technical or computer jargon in menu options should be avoided. 

■ Splitting a menu over two pages, possibly by having two columns of 
options on one page may create problem in navigation. 


2.5 High precision touch screen interaction 

This is brief review of research done at IBM by Alhinsson and Zhui in techniques for 
interacting with touch screen at high precision. 

Interaction over the touch screen is the most ‘‘Direct” form of interaction in HCI. The 
zero displacement between input and output, control and feedback makes touch screen 
very intuitive to use, particularly for novice users. Besides its directness, touch screen 
also have special limitations. First, the user’s finger, hand or arm can obscure the screen. 
Second, human finger has a very low resolution. It is difficult to point at taigets that are 
smaller then finger width. 
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1 he goal is to design interaction tool allowing pixel level pointing in a fast and 
elhcient manner. They propose two techniques; Cross Keys and Precision Handle. Along 
with a Zoom Pointiny, which was used earlier. 


for pointing a pixel sized target, it is possible to use zooming to enlarge the 
inlonnation space to a scale in which one can comfortably point at a target with a bare 
lingei. the method applied for zooming is known as bounding box zoom. With this 
approach user first activates the zooming mode and then draws a bounding box that 
encloses the area to be zoomed in. When the user releases the box, the system zooms and 
pans to the selected area. Thereby user can easily point at the target at an easy scale. 



Figure 2.4.1 Zoom Pointing Method 

Tlie second method Cross Lever presents two crossed lines when user first taps on 
the screen. The intersection between these lines indicates the point to be selected, 
which can be controlled by moving the two “Rubber Band” Lines separately. Each 
end of the line has a handle, that can be dragged and, making the line longer or 
shorter. As can be seen in figure 2.4.2 the user deploys the Cross-Lever as close as 
possible to the highlighted target. To adjust the intersecting point to within the target 
the user drags the uppermost handle upwards. The other two handles do not move. 
I’he smaller circle surrounding the intersection point is the activation area of the 
Cross- Lever 
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Figure 2.3.1 Cross-Lever Method 


One another method called Virtual Keys techniques has another way to achieve 
the target. Viiiual Keys uses four graphical arrow keys and an activation key, all 
positioned on a side panel, to control the position of cross hair cursor (figure 2.4.3). 
The typical sequence is to fist deploying the cross hair by touching very near to the 
target, adjusting it using arrow keys and then tapping the activation key. 



Figure 2.3.1 Virtual Key Method 

In continiiati(m with the previous two methods, a new method has been suggested 
called cross keys. I'his method inherits the concept of Cross-Lever and Virtual-Keys 
methods. The cross hair contains four arrow keys at all the four ends. These keys act 
like Virtual Keys. The first tap on the target deploys the cross hair with the arrow 
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keys ( llgLire 2.4.4) and if adjustments are needed, tapping on the arrow keys can move 
cross hairs in the similar fashion as of Cross-Lever technique. Once on target, user 
can tap the center circle for activation. 



Figure 2.3.1 Cross-Key Method 

'Fhese methods are the primer techniques, which form a basic platform tor the 
further development of high precision techniques. 




Chapter 3 

User Interaction with Input Elements in 
Touch Screen Interfaces 


3.1 Abstract 


Interaction with the touch screen using finger touch for information retrieval in public 
information system is becoming a widely used application now days. This work explores 
the study of user’s interaction and behaviors over a touch screen using a small interactive 
game. Our goal is to decide upon the parameters for input element such as Button, scroll 
bars, check box etc. on the basis of results generated by the game. The further idea is to 
design intuitive based interfaces so that public information systems can be made easy to 
navigate and work up(.)n. 

3.2 Introduction 

■foLich sereen interaction is new field of research and becoming verv' popular in many 
applications ol' Jiijonihiiion ciiul Coniiiuinicuiioi? I L'clvioloi^y (ICT) systems, such as 
public information kiosks, ticketing machines, bank teller machines etc. This is the direct 
approach of interaclirui as the control and vision area are same and usei can u>e has linger 
or a stN'lus pen to activate controls. The widely used approach is finger touch instead of 
stylus, although finger has much less resolution in relation to the stylus pen. A stylus is a 
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much shell pel pointer than a linger tip, but its resolution may still not be as good as a 
mouse cursor. 


1 hese intei laces have many advantages. First, due to its control surface overlaid over 
the display area, no additional input devices are required. Second, these monitors are very 
lobust compared to any other input device such as mouse and keyboard. The basic 
disadvantages includes less freedom to design input controls, due to low resolution of 
linger, accuracy is not as good as normal input devices. User’s finger, arm and hand can 
block the vision while navigation through he screen. 

While designing the interfaces it is very essential to study user’s reaction and their 
beliaviors while interacting with touch screen interface. Different people behave in a 
different manner with a given system. Most of the user use either of their hands so it is 
necessary to consider left handed and right handed people. Some user use single finger 
and some of them use multiple fingers and some of them even use their thumb for 
selection and clicking the buttons etc. also users react in a different way for different type 
of' input elements such as different size, shape, color and texture of the buttons, different 
combination of foreground and background colors, variation in spacing between buttons. 
For that purpose we proposed a game application which can collect data while the user is 
interacting with that game. That data can be used for analysis of different parameters for 
the input elements. 


3.3 The Game Application 

The game is based on the simple logic of random prompt for selection of input 
elements. The game has 9 buttons arranged in a 3x3 matrix form. At a time one button 
highlights and uses has to catch that before another button became active. The user has to 
catch the highlighted button and his success and failure for touching that button will be 
stored in a remote database in the form of HIT and MISS. The game has 8 different parts 
and each part presents a new similar game and hence a new experimentation. 
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The game starts with an introduction screen (Figure 3.1) with a brief description about 
the game and instructions for using the touch screen. The first screen consists of only two 
rectangular buttons to reduce the confusion for first time users. An animated arrow key 
points towards the start of game. The start button is green colored which drives the user to 
accept it. The another buttons is red colored and kept low in the contrast which shows that 
button is not to accept but to decline the current scene. After selection of green button, 
user enters into first part of the game. 
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Figure 3.3.1 


Game Part 1 

This part consists of 9 rectangular buttons over a black background and user has to 
select the highlighted button. These buttons are highlighted randomly so this is difficult to 
predict the next button to catch. After a predefined time the game automatically enters the 
next level. On the top right comer, total no. of HIT and MISS for highlighted buttons can 
be seen. User can pla.y continuously until he feel s bore and at that time he can quit by 
touching red button which is active in this level and green button is dim showing its 

inactive nature. (Figure 3.2) 


Figure 3.2 


Game Part 2 

This part is very much similar to the part one, the only difference is the background of 
the array of buttons. The backgroimd is 50% gray and the game proceeds in the similar 
fashion. (Figure 3.3) 



Figure 3.3.3 




Game Part 3 


This part is again a part of the same series; the only difference is the background of 
the array of buttons. The background is white and the game proceeds in the similar 
fashion. (Figure 3.4) 



Figure 3.3.4 


Game Part 4 

This part displays equilateral triangles and game follows the same rules. (Figure 3.5) 
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Figure 3.3.5 
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Game Part 5 

This part has a similar array of circular buttons with a difiused gradient. (Figure 3.6) 



Figure 3.3.6 


Game Part 6 

This Part is the continuation of the last part but the distance between the elements has 
been reduced. 



Figure 3.3.7 
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Game Part 7 

This part consists of mixed shapes and similar random highlighting of the buttons. 
(Fig. 3.8) 



Figure 3.3.8 


Whenever user quits the game after pressing red button, it updates the database 
simultaneously and again user comes to the very first screen of the game. 

This application follows the following algorithm. 

Game Algorithm 


Start Main 

If (GreenButton Click = True) 

Call Function (SelectLevel) 

End If 
End Main 

Function Selectlevel 

Generate random number between 1 to 7 
Goto Game (GameNumber) 


End Function 


Fimdion ^tmie ((lameNiimher) 

Sclecl ( ramcNtimher 

C'ase 1 : Skirt game I 

Do while (time>- 1 sec.) 

Generate random number between 1 to 9 
HighlightButton (Random number) 

If (SelectedButton - HighlightButton) 

Increment H it Co unt 
Else 

If (SelectedButton = RedButton) 

Update database for Hitcount and Misscount 
Quit the game and return to the first screen 
Else 

Increment MissCount 
End If 

End If 


End While 

Update database for Hitcount and Misscount 
Call Function (SelectLevel) 

Break 

Case 2 : Start game I 

Do while (lime>^ 7 .sec.) 

Generate random number between I to 9 
* 

* 

( \ise 3: 

* 


End Select 
End Function 
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3.4 The Experimentation 

65 vokintccis paiticipated in the experiment. The tollowing data was collected from 
them bcibre experimentation. 


Mean Age ; 23 Yrs 

Total Males : 60 

Total Females 5 

Fersons familiar with the GUI 58 

Persons lamiliar with the Touch Screens 42 

Right Handed 51 

I -eft I landed 14 


The main experimental apparatus was a commercial CRT based 14”, 5 wire Resistive 
Touch scrceru made by MicroTouch™ 3M. Its active display area was 255 x 191 mm and 
was set at 1024 x 768 pixels resolution, with pixel size of 0.25 x 0.25 mm. Its refresh rate 
was set to 85 I Iz. Activation force using finger < 50 gm with 5/8 diameter finger. The 
screen was tilted to 40° to minimize fatigue. 

Tlie volunteers were given the freedom to explore the interface with some brief 
guidelines in the start screen to describe about touch screen and interaction with the 
interface. The interactive game was not having any time limit, so volunteers spend time 
according to their convenience. 

file following data was continuously updated after completion ot every stage. 

• Automatic serial number for each experiment 

• Total number of successful hits 

• Total number of wrong hit 

• Total duration of that stage of game 

'File data was stored dynamically in MS Access 2000 database using Active Server 
Page and Flash MX integration. 
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I'lie following code in ASP was used for updating database. 


<'y!)(u)Janguage = "VBScript" %> 

<% 

sir I nr Recimst.Form("H!T") 
sir MISS Request. Form("MISS") 

.strop R TIME Request. Fonn("OPRJIME") 

.sir EXP NO Request. FormCEXP JO") 

My Path Server. MapPath("dhI .mdh ") 

Set conn Server. ( 'recdeOhiect("ADODB.Connection") 

CO mi. Open "Driver Microsoft Access Driver (*.mdh)};" &: _ 

"DBO "X My Path 

SOL "INSERT INTO GAME2 (HIT.MISS.OPRJIME.EXPJNO) VALUES 

('"&slrIITT& "'&strMISS&"\ "'&strOPR_TIME&"'. "'&strEXP_NO&"')" 
conn.ExecutefSQL) 

%■ 


3.4. 1 Data Collection and analysis 

I 'he data collected form each stage of the game was the analysed to draw inferences. 


(i) Dsitii from Game Part 1 


Total number of data 

= 138 

Total number of successful Hits 

= 892 

'I'otal number of unsuccessful Hits 

= 415 

1 lit to Miss ratio 

= 2.149 



(ii) Data from (iame Part 2 

Iblal miinbcr ofdata 
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= 127 

I'otal number ofsiiccessrul Hits = 1619 
I'olal number of unsuccesstul Hits =741 
Hit to Miss ratio = 2.184 

(iii) Data from Game Part 3 

Total number ofdata = 127 

Total number of successful I lits = 2230 

Total number of unsuccessful Hits =927 
1 lit to Miss ratio = 2.405 

(iv) Data from (»amc Part 4 

Total number ofdata = 95 

Total number of successful Hits = 621 

Total number of unsuccessful Hits = 142 

Hit to Miss ratio =4.37 

(v) Data from Game Part 5 

Total number ofdata =93 

Total number of successful Hits = 1076 
Total number of unsuccessful Hits =201 
Hit to Miss ratio =5.35 

(vi) Data from Game Part 6 

Iblal number ofdata =97 

Total number of successtul Hits =917 
'Total number of unsLiecessful Hits =268 
Hit to Miss ratio =3.421 
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(vii) Data from Game Part 7 


Total number of data 

= 65 

Total number of successful Hits 

= 384 

Total number of unsuccessful Hits 

= 86 

Hit to Miss ratio 

= 4.465 


3.4.2 Comparative analysis of data from all stages. 



Part 1 : Hit to Miss ratio = 2.149 



Part 3: Hit to Miss ratio = 2.405 



Part 2: Hit to Miss ratio = 2.184 


^ ,<n:n iik'i 





A 

: ' 




Part 4; Hit to Miss ratio = 4.37 
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Part 5; Hit to Miss ratio = 5.35 
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Part 7: Hit to Miss ratio = 4.465 
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Part 6; Hit to Miss ratio = 3.421 


3.4.2 User Study and personal observation. 

During experimentation, users were asked to play the game, without giving any 
guidelines for using touch screen. They were then observed carefully for their behaviour 
and way of interaction with the touch screen. Some of the users were interviewed in 
details regarding the problems in the interface. We can see some of the pictures of the 
users interacting with the system in Figure 3.4.1. 



A user navigating the interface Some users use their thumb to navigate 

the interface 



/• - Precision Touch 

Both the hands in action for navigation 


Figure 3.4. 1 User’s study over touch screen mteraction 
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3.5 Inferences and Solutions 

After analysis of data collected from the experimentation and personal observation, 
the following inferences have been drawn. 

3.3.1 Inferences from data analysis 

(i) User navigates faster, with contrasting combination of background colour 
and button colour. 

(ii) User navigates faster, in case there is less spacing between the buttons but 
the accuracy level goes down simultaneously. 

(iii) User navigates slower in case there is more spacing between the buttons 
but the accuracy level increases simultaneously. 

(iv) User navigates efficiently if interface elements maintain a hamiony in 
colour and shapes. 


3.3.2 Inferences from personal observation 

(i) Triangular buttons seems to be most comfortable in large button spacing. 

(ii) Sharp edges of buttons slow down the navigation speed. 

(iii) Users feel comfortable using both the hands while navigating. 

(iv ) Hands obstructs many elements, hence creates problem in navigation. 

(v) Some users tap over the screen many times to select a button. 
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3.3.3 Solutions for hand obstruction over the screen during navigation. 

One of the biggest problems while navigation over a touch screen interface is the 
obstruction created by our own hand. For this sake, the menus and navigation 
elements can be arranged in such a fashion so that user can comfortable access all 
the options. As can be seen from figure 3.5.1, how conventional menus creates 
problem in navigation. 


Menu options 


f 

Menu options ^ 
obstructed by hand | 


Solution 




This style of menu gives 
y. a proper visibility to the 
user without obstructing 
the view 



Figure 3.5.1 Hand obstruction over the touch screen 






Chapter 4 

User interface design for a touch screen 
based information & navigation system 
for an academic campus 

4.1 Introduction 

Indian Institute of Technology Kanpur has a huge campus on 1055 acres of land. 
Campus Amenities includes Academic area. Staff residential area. Students hostel area, 
recrecition centers, market etc. Although the institute has many signages but new comers 
and visitors always find it very difficult to locate the desired location mainly in academic 
area. Also the visitor’s category includes every class of people and majority of people 
face this problem. So there is a need to design and develop a system, which can provide 
the general information about the institute as well as provide an interface to the visitor to 
locate desired locations. 


4.2 Need statement and problem fomiuiation 

1 o design a navigation and information system for II 1 Kanpur to locate various 
important places within the campus using touch screen interaction techniques. 

4.2.1 Target group 

if'!' Kanpur was chosen because people from different narts of the countr\ and cuhure 
can he taraeted here. 111 Kanpur provides a veiy good platform to study ano coniduci 
survey upon people from different educational background. It is ver}' easy to target every 
class of people including, new students, visitors from rural and urban areas etc. 
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4.2.2 User research 

A user survey was conducted to find out the basic problems user generally face while 
coming to the campus for the first time. Some of the problems were very common among 
new community of IIT Kanpur Campus. After conducting the user survey, some of the 
problems were chosen to solve and to decide design guidelines for designing the 
interface. 

Some of these problems are as follows: 

(i) It is very difficult to reach a particular destination in academic area without 
asking somebody. 

(ii) Many people in a hurry cannot find bus schedule. 

(iii) Toilets and canteens are not easily accessible 

After observing the user data and depth interviews, it was observed that: 

(i) There is a need to design an information system, which can provide an easy 
approach in finding the desired destination mainly in the academic area. 

(ii) The system should be simple enough to motivate a novice user to use it. 

(iii) The design should be intuitive and should solve the basic queries of the users. 

4.3 Design preliminaries 

Some of the implementations decided to implement in the system are as follows: 

(i) A navigation tool to access important places within the academic area campus. 

(ii) Similar tool to access public amenities such as food points, toilets, phone 
booth etc. 

(iii ) Next available bus to various places in Main Kanpur city. 

(iv) Date and time tool. 

(v) Basic information about different departments and centers. 

(vi) User data entry form. 

A basic prototype was prepared for testing the functionality of the navigational map. 
Since the mode of input was touch screen, all the element chosen were click able 
buttons. 
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4.3.1 Icon selection 

Icon selection was the most important part of the whole project. Since many people 
may not understand the long English phrases or guidelines, it is very necessary to design 
graphical icons for them to interact with the system easily. The icons selection was based 
on ; 

(i) The user mental model with the touch based interfaces. 

(ii) The users familiarity with the elements in the icons. 

(iii) Users motivation. 

The following icons were designed: 




A clock 


IIT Staff Bus 



Centers and buildings in the campus 


Public amenities 


Figure 4.3.1 (a) Icon Set for the Interface 
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Public amenities 


Male 




■r Syfamlt 


NAVIK 


Buttons 


Brand name for Navigation Kiosk 


Figure 4.3.1 (b) Icon Set for the Interface 


4.4 Design of interface and interactive tools 

Here is a brief description of interactive tools, which helps in the navigation of 
academic area map. The below shown menu is used to select desired destination and the 
result showing the shortest path is displayed in the map. We can see the control for scrolls 
are given at the bottom. Providing scroll controls at the bottom prevents the obstruction of 
hand can provide full visibility of the menu options. 
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Aerospace Engg. 

Biological Sciences 


Chemical Engg. 


Chemistry 



Menu for selecting departments 


nX Kanpur map 


Figure 4.4.1 Menu and Map 


User proceeds through the interface as follows: 


1) Welcome Screen 



Figure 4.4.2 Welcome screen 
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2) Clock 

It has been observed that a user tries to touch each and every visible element over the 
screen. In that case every active element should give some response or acknowledgement. 
In case of clock on the top-right comer, it shows time and date in digital format if user 
touches it. 



Figure 4.4.3 Response of clock 


3) Bus Schedule 

nx Kanpur is 17 Km away from the main city and EX community is dependent on the 
bus service provided by the administration. It was found that most of the new people in 
the campus are not aware about the bus schedules and they face problem in looking for 
the schedules. Xhis interface has an element on the main screen that shows am icon of the 
bus. If a user touches that icon it will display a listing of main places in the Kanpur city. 



Figure 4.4.4 Icon for IIX Kanpur bus schedule 








yisw dr'ft-r.M 


iaCJlit* t0»p ■»!««(« fitiltbrs 




Select Destination 


Figure 4.4.5 Interface Showing the schedule of buses 


5) Information about the system 

The icon for NAVIK shows the brief description about the system and its‘ working 


?^NAVil' 


NAVIK 


in liwtt ww* 

Iht* comp4^xitiw in lecsftWsif* 

iboutavaiitte busts to rwwiii 

'' A^' 

NAVI or N^wiptliw Kl^lc. In^s. b«» iwKf fef Was* SliniWtli tif ^ 

IIT ICiPf w m pPt 0 INlir tofS^ yw'' tstrwwji 

lliissys*ffn ■'^>‘‘ % 


Figure 4.4.6 Interface showing the schedule of buses 
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6) Navigation 

This is the major part of the complete interface. This section deals with the navigation 
of the academic area campus. Since there are many places in the campus, it is very 
necessary to divide the information into segments. There are three main sections; 

(i) Departments 

(ii) Centers and important places 

(iii) Public amenities 



Figure 4.4.7 Three segments for navigation 


7) Departments 

The menu on the left contains the listing of all the departments and after clicking the 
option it shows the way from Gate-1 to the destined place in yellow dotted lines 



Figure 4.4.8 Department search 
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7) Centers and important places 

This section is similar to the departmental search. It gives the option to find centers, 
important buildings and places within the campus. 



Figure 4.4.9 Centers and important places in the campus 


7) Public amenities 

This section provides a quick access to the public needs such as Food Points, Toilets 
etc. The sub menu in this section is different from the last two sections. There is a 
separate icon set for food point and toilets. 



Figure 4.4.10 Icon set for Toilet and food points 
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Figure 4.4. 1 1 Interface for public amenities search 


7) User data entry 

T his section is a hidden option behind the webcam video output. A small window at 
the bottom right comer displays a live video of the user using a webcam. The basic 
purpose of this element is to hold the users attention. This was observed during 
experimentation that a user develops interest by looking his/her own video on the screen. 
If user touches the window, it displays an user data entry form. This form is an optional 
thing and it is used to store the basic information about the demographic information of 
the users. This data can further be utilized to do analysis and modifications in the existing 
system. 



Figure 4.4. 12 Live video out from webcam 
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Figure 4.4.13 User data entry form 


4.5 Tools and environment 

This project was completed with the help of different hardware and software tools. 
Considering the latest advancements in the software tools as well as the increasing 
bandwidth, this application was designed. The system consists of a server as well as a 
client machine connected through 100 mbps Local Area network. This section describes 
the detailed specification of all the tools. 

4.1.1 Hardware requirement 

The hardware used for experimentations and final prototype consists of the following; 

1. Server Side 

For running server applications as well as storing database, IBM ThinkCenter 
desktop (Model number M50 818712U) was used. The server has the following 
configurations; 

■ Intel Pentium 4 Processor with Hyper-Threading Technology, 3 .20 GHz, 
512 KB Internal L2 cache memory size. 

■ 512MB/4GB system memory (RAM) 
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■ Serial ATA/Ultra ATA-100, 120 GB hard disk drive 

■ Intel Extreme Graphics 2, 2048x1 536 256 colors Graphic Support 

■ Integrated Intel PRO/1 00 Ethernet 

■ SoundMAX Cadenza Audio Support 

■ Standard 104 keys IBM keyboard 

■ 3 - button, optical scroll IBM mouse 



Figure 4.1.1 IBM ThinkCenter Server 


2. Client Side 

For running client side application, IBM ThinkCenter desktop (Model number 
A30 819866U) was used. The client system has the following parts; 

■ Intel Pentium 4 Processor 2.60 GHz, 512 KB Internal L2 cache memory. 

■ 51 2MB/2GB system memory (RAM) 

■ Serial ATA/Ultra ATA-100, 40 GB hard disk drive 

■ Intel Extreme Graphics 2, 2048x1536 256 colors Graphic Support 

■ Integrated Intel PRO/1 00 Ethernet 



Figure 4. 1 .2 IBM ThinkCenter Clint 

■ SoundMAX Cadenza Audio Support 

■ Standard 104 keys IBM keyboard 



3 - button, optical scroll IBM mouse 
3M Microtouch®, 14”, 5-wire resistive Touch Screen 


Figure 4.1.3 Microtouch Touch Screen (14”) 


Webcam 


Figure 4. 1 .4 Intel webcam (Model Number CS330) 


3. Network requirements 

Although system can be made functional with any network requirement, but 
keeping a vision to implement multiple client kiosks, the system was designed to 
work on a 10/100 local area network. Where as, server and client needs 10/100 
ethemet adapter. TCP/IP was the main communication protocol. 


Figure 4.1.5 Local Area Network Connection Cable 
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4. Kiosk 

The touch screen monitor needs to be placed at a sufficient height so that users 
can easily interact with the system while standing. The kiosk provides housing for 
touch screen monitor, CPU cabinet. Battery backup, speakers and webcam. Kiosk also 
provides a cooling unit such as fan for maintaining the temperature of electronic 
components. 


Figure 4. 1 .6 A BCiosk 



4.1.2 Software requirement 

The project was completed using different software applications, which are explained 
here; 

1. Operating system 

Window 2000 Professional has been used for server as well as client machines. This 
operating system has sufficient tools to design a medium level network application. 
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2. Internet Information Service (IIS) 5.0 

The server system runs an inbuilt web server IIS 5.0 by Microsoft. Internet 
Information Services (IIS) 5.0 is a powerful Web server that provides a highly reliable, 
manageable, and scalable Web application infrastructure. IIS defines a basic functionality 
used to build Web applications. With IIS, Microsoft includes a set of programs for 
building and administering Web sites, a search engine, and support for writing browser- 
based applications that access databases. IIS can host HTML pages and run different 
scripts such as CGI PERL etc. 

In this project IIS has been used to host HTML pages along with flash (swf) files. It 
also hosts CGI files which on execution in IIS environment, interact with the Microsoft 
access database for storing client side data. 

3. Flash Communication Server MX 1.5 

Flash communication server has been used separately as it has some additional 
features, which help in increasing interactivity and productivity of the application. 
Macromedia Flash Communication Server MX is a complete solution for creating and 
deploying streaming media and rich communication functionality in websites and Internet 
applications. 

The product includes a professional set of application creation and debugging tools 
that are integrated into Macromedia Flash MX, and powerful server software that allows 
streaming of multi-way audio, video and data and create multi-user communications 
features that are accessible by the widely distributed Macromedia Flash Player. 


Macromedia has released a new format for streaming video and audio files over the 
network. This format called “.flv” or flash video has been supported by flash 
communication server as well as flash player 6 +. Using these tools following 
applications has been implemented in the system: 

1 . Video capture using web cam 

2. Video playback of recorded archives over the LAN 

3. Live display of video in the interface 
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4. Flash Player 6.0 

Flash player 6.0 is the minimum requirement of the system. The interface has been 
designed using flash MX 2004, and it can only be played using flash player plug-in which 
is supported by Microsoft internet explore 5.0. Flash player supports display of flash 
video and interaction with Microsoft access database using asp script files. 

4.1.3 Development Tools 

5. Flash MX 2004 

Flash MX 2004 is a power tool for developing interactive application for web and 
multimedia. The main front-end design and complete interactive environment has been 
designed using tool. It was used for developing web-cam integration, network 
connectivity, audio integration and video displays. Action script 2.0 was used to add more 
interactivity to flash MX applications. 

6. Dreamweaver MX 

Dreamweaver MX 2004 is another tool for website design. This tool was used for 
embedding flash files (.swf files) into html pages and writing code for ASP files. 

7. Adobe Photoshop 7.0 

Photoshop is a very famous image-editing tool by Adobe. It was used to design 
background templates and image editing, throughout the project. 

8. Final Cut Pro 

This is video editing tool by Apple Corporation. This tool was used for editing videos 
used in the application. This tool cannot render video files into flash format, so Quick 
time player 6.0 has been used for converting mpeg files into flash video (.flv) tormat. 



Chapter 5 
Conclusions 


In this final chapter we summarize by listing the contributions of this dissertation and 
recommending the directions for further research in this field. 

5.1 Contributions of this dissertation 

1 . In this thesis a new rule has been devised to design menus and buttons for a touch 
screen based interface. This helps in solving the problem of obstructions created 
due to user’s hand during interaction over a touch screen. 

2. This thesis describes the techniques to catch users attention and to hold it for a 
long time. The implementation of live video output using webcam helps in 
holding the user’s attention. 

3. The implementation of Fitts' Law has been verified for touch screen based 
interaction. User access faster with large button size and with large spacing 
between them. 

4. The results and inferences have been used to design a touch screen based 
information and navigation system for IIT Kanpur campus to locate departments 
and other important places within the campus. 
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5.2 Direction of further research 


Public information system needs to be designed for easy access and heavy usage. The 
most important part is to design and improve the existing interfaces of the conventional 
systems. Touch screen based system are used in many places but the interfaces need to 
designed keeping the user’s efficiency in mind. Some of the techniques can be applied in 
such system. 

The final information system for IIT Kanpur has been designed considering users in 
the age range of 15 years and above. The research can be further extended considering 
children and disables. The information system can be made more responsive and 
intelligent enough to adapt itself according to the environment and climate change. 
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